import {Button, Card, Form, Input, message, Popconfirm, Select, Table, Tag} from "antd";
import useChannels from "@/hooks/getChannels.js";
import moment from 'moment'
import useSwiper from "@/hooks/getSwiperList.js";
import {HTTP} from "@/utils/HTTP.js";
import React, {useRef} from "react";

const {Search} = Input;
const {Option} = Select;

const Swiper = () => {
// 获取频道数据
    const {channelsList} = useChannels();
    // 获取swiper轮播图数据
    const {swiperList} = useSwiper();
    // 绑定表单实例
    const FormRef = useRef();
    // 自定义列名
    const columns = [{
        title: '商品名称', dataIndex: 'swiper_title', key: 'swiper_title',
        render: (_, record) => {
            return (
                <Tag color={"geekblue"}>
                    {record.swiper_title}
                </Tag>
            )
        }
    }, {
        title: '商品类型', dataIndex: 'swiper_type', key: 'swiper_type',
        render: (_, record) => {
            return (
                <p>
                    {channelsList.map(item => {
                        if (item.id === record.swiper_type) {
                            return item.type
                        }
                    })}
                </p>
            )
        }
    }, {
        title: '创建时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
        render: (_, record) => {
            return (
                <p>
                    {moment(record.createdAt).format('YYYY-MM-DD')}
                </p>
            )
        }
    }, {
        title: '操作', dataIndex: '', key: 'x', render: (_, record) => {
            return (
                <Popconfirm
                    title="删除该数据"
                    description="你确定要删除该数据吗？"
                    onConfirm={() => onDelete(record)}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button type={"primary"} danger={true}>
                        删除
                    </Button>
                </Popconfirm>
            )
        },
    },];

    // 点击添加按钮
    const onFinish = async (values) => {
        const res = await HTTP({
            url: "/api/swiper/create",
            method: "POST",
            data: values
        })
        if (res.code === 104) {
            message.success("添加成功")
            FormRef.current.resetFields();
        } else {
            message.error("添加失败")
        }
    };
    // 点击删除按钮
    const onDelete = async (record) => {
        const res = await HTTP({
            url: `/api/swiper/delete`,
            method: "DELETE",
            data: {
                id: record.id
            }
        })
        if (res.code === 102) {
            location.reload()
            message.success("删除成功")
        } else {
            message.error("删除失败")
        }
    };
    return (<div style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
        <Card
            title={"添加轮播图"}
            style={{flex: 1, height: 620}}
        >
            <Form
                onFinish={onFinish}
                ref={FormRef}
                style={{
                    maxWidth: 600,
                }}
            >
                <Form.Item
                    label="图片地址"
                    name="URL"
                    rules={[{
                        required: true, message: '请输入商品图片地址!',
                    },]}
                >
                    <Search placeholder="输入图片地址，输入之后查询一下是否有效" onSearch={(value) => {
                        location.href = value;
                    }} allowClear/>
                </Form.Item>

                <Form.Item
                    label="商品名称"
                    name="swiper_title"
                    rules={[{
                        required: true, message: '请输入商品名称!',
                    },]}
                >
                    <Input
                        style={{
                            width: '100%',
                        }}
                        allowClear
                    />
                </Form.Item>
                <Form.Item
                    label="商品类型"
                    name="swiper_type"
                    rules={[{
                        required: true, message: '请输入商品类型!',
                    },]}
                >
                    <Select>
                        {channelsList.map((item) => {
                            return <Option value={item.id} key={item.id}>{item.type}</Option>
                        })}
                    </Select>
                </Form.Item>

                <Form.Item
                    label="商品详情"
                    name="swiper_text"
                    rules={[{
                        required: true, message: '请输入商品详情!',
                    },]}
                >
                    <Input.TextArea autoSize={{minRows: 5, maxRows: 8}}/>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 4, span: 16,
                    }}
                >
                    <Button style={{width: 100}} type="primary" htmlType="submit">
                        添加
                    </Button>
                </Form.Item>
            </Form>
        </Card>

        <Card
            title={<div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                <p>轮播图数据表</p>
                <Button type={"dashed"} onClick={() => {
                    location.reload()
                }}>刷新</Button>
            </div>}
            style={{
                flex: 1.5, marginLeft: "5px", height: "620px", overflow: "hidden"
            }}
        >
            <Table
                rowKey={(record) => record.id}
                columns={columns}
                scroll={{y: 400, x: 500}}
                pagination={{
                    pageSize: 5,
                }}
                expandable={{
                    expandedRowRender: (record, index) => (<div>
                            <p>
                                <i>商品详情：</i>
                                {record.swiper_text}
                            </p>
                            <p>
                                <i>商品图片：</i>
                                <img style={{width: '100px', height: '100px'}}
                                     src={record.URL} alt={"商品图片"}/>
                            </p>
                        </div>

                    )
                }}
                dataSource={swiperList}
            />
        </Card>
    </div>)
}

export default Swiper